<template>
  <div>
    <el-input disabled :value="query.roleName" style="width: 97%;margin: 20px 0 0 15px"></el-input>
    <el-tree
      style="margin: 20px 0 0 15px"
      :data="menuData"
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="checkedIdAll"
      ref="tree"
      highlight-current
      :props="defaultProps">
    </el-tree>
    <div style="margin: 20px 0 0 15px">
      <el-button size="small" type="primary" @click="savePermission">保存</el-button>
      <el-button size="small" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import {
  reqAllocationRolePermissionAsync,
  reqGetMenuToAssignListAsync, reqGetRoleMenuToAssignAsync
} from '@/api/permission'

export default {
  name: 'RoleAuth',
  data() {
    return {
      menuData: [], // 保存角色的菜单信息
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tree: {}, // 树状组件的组件对象
      query: { // 保存路由传递传递的query参数
        id: '',
        roleName: ''
      },
      checkedIdAll: [] // 保存被选中的id的属性
    }
  },
  mounted() {
    // 解构获取query参数
    const { id, roleName } = this.$route.query
    // 保存query参数
    this.query = {
      id,
      roleName
    }
    // 初始化获取权限菜单信息
    this.getMenu()
    // 初始化获取对应角色已经拥有的权限
    this.getRolePermission()
  },
  methods: {
    // 获取初始菜单
    async getMenu() {
      try {
        const result = await reqGetMenuToAssignListAsync()
        this.menuData = result.data.children
      } catch (e) {
        this.$message.error('获取菜单失败')
      }
    },
    // 根据角色获取已经拥有的权限
    async getRolePermission() {
      try {
        const result = await reqGetRoleMenuToAssignAsync(this.query.id)
        this.$message.success('获取角色权限成功')
        this.checkedIdAll = this.recursionGetCheckedIdAll(result.data.children, [])
        // 更新数据
        await this.getMenu()
      } catch (e) {
        this.$message.error('获取角色权限失败')
      }
    },
    // 获取角色可以操控的权限的 id
    recursionGetCheckedIdAll(data, arr) { // arr每次收集到的角色对应权限的 id
      data.forEach(item => {
        if (item.select && item.level === 4) {
          arr.push(item.id)
        } else if (item.children) {
          this.recursionGetCheckedIdAll(item.children, arr)
        }
      })
      return arr
    },
    // 获取已经选中的权限id
    async savePermission() {
      // 返回目前被选中的节点的 key 所组成的数组
      const CheckedKeys = this.$refs['tree'].getCheckedKeys()
      // 返回目前半选中的节点的 key 所组成的数组
      const HalfCheckedKeys = this.$refs['tree'].getHalfCheckedKeys()
      // 合并选中的权限数据
      const permissionVo = {
        permissionIdList: [...CheckedKeys, ...HalfCheckedKeys],
        roleId: this.query.id
      }
      try {
        await reqAllocationRolePermissionAsync(permissionVo)
        this.$message.success('分配权限成功')
        // 更新数据
        await this.getRolePermission()
        await this.getMenu()
      } catch (e) {
        this.$message.error('分配权限失败')
      }
    },
    // 取消的回调
    cancel() {
      this.$router.push({
        name: 'Role'
      })
    }
  }
}
</script>

<style scoped>

</style>
